<template>
  <view class="page">
    <img v-if="info.img" :src="info.img" alt="">
    <view class="article-content">
      <rich-text :nodes="info.content"></rich-text>
    </view>
    <view class="contact-us">
      <text class="title">联系我们</text>
      <text>联系人：{{ info.name }}</text>
      <text>邮箱：{{ info.email }}</text>
      <text>联系电话：{{ info.phone }}</text>
    </view>

    <view catchtouchmove="catchtouchmove" class="tips">
      <view class="tips_box">
        <span class="jump left" @click="toservice()">《用户服务协议》</span>
        <span class="left">和</span>
        <span class="jump left" @click="toPrivacy()">《隐私政策》</span>
      </view>
    </view>
    <modal-component
      v-if="showModalComponent"
      :title="title"
      @confirm="showModalComponent = false"
    >
      <rich-text :nodes="richtextContent"></rich-text>
    </modal-component>
  </view>
</template>
<script>
import ModalComponent from '@/components/Modal/index'
import { getAbout } from '@/api/mine'
export default {
  components: { ModalComponent },
  data() {
    return {
      info: {},
      title: '',
      richtextContent: '',
      showModalComponent: false
    }
  },
  onLoad() {
    this.getAbout()
  },
  methods: {
    getAbout() {
      getAbout().then(res => {
        const { data } = res
        const { content, hidcount, uscontent } = data.list
        const img = data.list.img ? this.domain + data.list.img : ''
        this.info = {
          ...data.list,
          ...{
            img,
            content: this.formatRichText(content),
            hidcount: this.formatRichText(hidcount),
            uscontent: this.formatRichText(uscontent)
          }}
      })
    },
    formatRichText(richtext) {
      const reg1 = new RegExp("&lt;", "gi");
      const reg2 = new RegExp("&gt;", "gi");
      const reg3 = new RegExp("&amp;ldquo;", "gi");
      const reg4 = new RegExp("&amp;rdquo;", "gi");
      const result = richtext.replace(reg1, `<`).replace(reg2, `>`).replace(reg3, '“').replace(reg4, '”')
      return result
    },
    toservice() {
      const { uscontent } = this.info
      this.title = '服务协议'
      this.richtextContent = uscontent
      this.showModalComponent = true
    },
    toPrivacy() {
      const { hidcount } = this.info
      this.title = '隐私政策'
      this.richtextContent = hidcount
      this.showModalComponent = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    color: #222;
    img {
      width: 95%;
      margin-top: 20rpx;
    }
  }
  .contact-us {
    width: 100%;
    padding-left: 20rpx;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    font-size: 28rpx;
    color: #999;
    .title {
      font-size: 36rpx;
      font-weight: 600;
      color: #2979ff;
    }
  }
  .tips_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .jump.left {
      color: #2979ff;
    }
  }
.article-content {
  margin: 5px 0px 0px 5px;
  padding: 8px;
  font-size: 28rpx;
  color: #999;
  background-color: #ffffff;
}
.textarea-box {
  position: relative;
  width: 100%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: #fff;
  textarea {
    width: 100%;
    min-height: 250rpx;
    margin-bottom: 28rpx;
  }
  .currentWordLength {
    position: absolute;
    bottom: 0;
    right: 5rpx;
    font-size: 28rpx;
    color: #999;
  }
}
.btn {
  button {
    width: 90%;
    border-radius: 10rpx;
    background: #e76625;
    color: #fff;
  }
}
</style>